<wicket:panel>
	<div class="agent-list card no-autofocus">
		<div class="card-body">
			<div class="d-flex mb-4">
				<form wicket:id="query" class="clearable-wrapper flex-grow-1">
					<div class="input-group">
						<input wicket:id="input" spellcheck="false" autocomplete="off" class="form-control" t:placeholder="Query/order agents">
						<span class="input-group-append">
							<button wicket:id="submit" type="submit" class="btn btn-outline-secondary btn-icon" t:data-tippy-content="Query"><wicket:svg href="magnify" class="icon"></wicket:svg></button>
						</span>
					</div>
				</form>
				<a wicket:id="addAgent" class="btn btn-primary btn-icon flex-shrink-0 ml-3" t:data-tippy-content="Add agent"><wicket:svg href="plus" class="icon"/></a>
			</div>
			<div class="operations mb-4">
				<a wicket:id="showSavedQueries" class="show-saved-queries text-gray mr-4 d-inline-block mb-2 text-nowrap">
					<wicket:svg href="eye" class="icon"></wicket:svg> <wicket:t>Show Saved Queries</wicket:t>
				</a>
				<a wicket:id="saveQuery" class="save-query text-gray mr-4 d-inline-block mb-2 text-nowrap">
					<wicket:svg href="save" class="icon"></wicket:svg> <wicket:t>Save Query</wicket:t>
				</a>
				<a wicket:id="filter" class="filter text-gray mr-4 mb-2 d-inline-block text-nowrap">
					<wicket:svg href="filter" class="icon"></wicket:svg> <wicket:t>Filter</wicket:t>
				</a>
				<a wicket:id="orderBy" class="order-by text-gray mr-4 d-inline-block mb-2 text-nowrap">
					<wicket:svg href="sort" class="icon"></wicket:svg> <wicket:t>Order By</wicket:t>
				</a>
				<a wicket:id="operations" class="text-gray mr-4 d-inline-block mb-2 text-nowrap">
					<wicket:svg href="ellipsis-circle" class="icon rotate-180"></wicket:svg> <wicket:t>Operations</wicket:t>
				</a>
				<a wicket:id="tokens" class="text-gray mr-4 d-inline-block mb-2 text-nowrap">
					<wicket:svg href="token" class="icon"></wicket:svg> <wicket:t>Tokens</wicket:t>
				</a>
				<span wicket:id="count" class="float-right text-gray"></span>
			</div>
			<div wicket:id="body">
				<div wicket:id="feedback"></div>
				<table wicket:id="agents" class="table"></table>
			</div>
		</div>
	</div>
	<wicket:fragment wicket:id="cpuHeaderFrag">
		<span class="mr-1"><wicket:t>CPU</wicket:t></span> <a t:data-tippy-content="CPU capability in millis. This is normally (CPU cores)*1000"><wicket:svg href="question-circle-o" class="icon icon-sm"/></a>
	</wicket:fragment>
	<wicket:fragment wicket:id="memoryHeaderFrag">
		<span class="mr-1"><wicket:t>Memory</wicket:t></span> <a t:data-tippy-content="Physical memory in mega bytes"><wicket:svg href="question-circle-o" class="icon icon-sm"/></a>
	</wicket:fragment>
	<wicket:fragment wicket:id="agentLinkFrag">
		<a wicket:id="link" class="d-flex align-items-center"><svg wicket:id="icon" class="icon icon-lg mr-1"></svg> <span wicket:id="label"></span></a> 
	</wicket:fragment>
</wicket:panel>
